<template>
  <div class="data-board" :style="{ zoom: autoZoom }">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="data-panel">
          <!--  标题 -->
          <RepTitle>
            <template #title>
              <span> 保有概览 </span>
            </template>
          </RepTitle>
          <!-- 总览 -->
          <RepOverview :overview-data="maintainOverview" />
          <!-- 子公司图表 -->
          <div class="subsidiary-chart">
            <img src="./img/title-icon.png" alt="" />
            <RepSubsidiaryChart ref="maintainSubsidiaryChartRef" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data-panel">
          <!--  标题 -->
          <RepTitle>
            <template #title>
              <span> 闲置周转材料分布图 </span>
            </template>
          </RepTitle>
          <div class="map">
            <RepChinaMap ref="RepChinaMapRef" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data-panel">
          <RepTitle>
            <template #title>
              <span> 闲置概览 </span>
            </template>
            <!-- <template #right>
              <span class="more" @click="handleShowMore"
                >查看更多 <el-icon><ArrowRight /></el-icon>
              </span>
            </template> -->
          </RepTitle>
          <RepOverview :overview-data="leaveUnusedOverview" />
          <div class="subsidiary-chart">
            <img src="./img/title-icon.png" alt="" />
            <RepSubsidiaryChart ref="leaveUnusedSubsidiaryChartRef" />
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="mt-4">
        <!-- 标题 -->
        <div class="data-panel">
          <RepTitle :is-border="true">
            <template #title>
              <span> 资产盘活动态 </span>
            </template>
            <template #content>
              <div class="asset-overview flex">
                <div class="asset-overview-item flex items-baseline">
                  <div class="label">盘活率：</div>
                  <div class="value ali">{{ assetOverviewItem.activationRate }} </div>
                  <div class="unit">%</div>
                </div>
                <div class="asset-overview-item flex items-baseline">
                  <div class="label">盘活金额：</div>
                  <div class="value ali">{{ assetOverviewItem.activationAmount }} </div>
                  <div class="unit">万元</div>
                </div>
              </div>
            </template>
            <template #right>
              <el-select
                v-model="activeAsset"
                class="m-2"
                placeholder="请选择"
                style="width: 120px"
                @change="handleActiveChange"
              >
                <el-option
                  v-for="item in assetOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </RepTitle>
        </div>

        <div class="asset-panel">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="subsidiary-chart border-right">
                <img src="./img/title-icon.png" alt="" />
                <RepAssetChart ref="RepAssetChartRef" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="real-time w-full h-full">
                <RepRealTimeAllocation ref="RepRealTimeAllocationRef" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="subsidiary-chart border-left">
                <img src="./img/title-icon.png" alt="" />
                <RepMaterialChart ref="RepMaterialChartRef" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <RepDialogMore ref="RepDialogMoreRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import RepTitle from './dataBoardMaterialComponents/repTitle/index.vue'
import RepOverview from './dataBoardMaterialComponents/repOverview/index.vue'
import RepSubsidiaryChart from './dataBoardMaterialComponents/repSubsidiaryChart/index.vue'
import RepChinaMap from './dataBoardMaterialComponents/repChinaMap/index.vue'
import RepAssetChart from './dataBoardMaterialComponents/repAssetChart/index.vue'
import RepMaterialChart from './dataBoardMaterialComponents/repMaterialChart/index.vue'
import RepRealTimeAllocation from './dataBoardMaterialComponents/repRealTimeAllocation/index.vue'
import RepDialogMore from './dataBoardMaterialComponents/repDialogMore/index.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import {
  maintainOverview,
  leaveUnusedOverview,
  maintainSubsidiaryChart,
  leaveUnusedSubsidiaryChart,
  assetOverview,
  assetOptions,
  assetSubsidiaryChart,
  assesMaterialChart,
  assesRealTime
} from './index'
defineOptions({ name: 'DataBoardMaterial' })

// 保有概览图表
const maintainSubsidiaryChartRef = ref()
// 闲置概览图表
const leaveUnusedSubsidiaryChartRef = ref()
// 中间地图
const RepChinaMapRef = ref()
// 资产盘活 子分公司
const RepAssetChartRef = ref()
// 资产盘活 分品类周转材料
const RepMaterialChartRef = ref()
// 资产盘活 表格
const RepRealTimeAllocationRef = ref()
// 查看更多弹窗
const RepDialogMoreRef = ref()
const activeAsset = ref('1')

const autoZoom = computed(() => {
  return window.innerWidth / 1920
})

onMounted(() => {
  maintainSubsidiaryChartRef.value.init(maintainSubsidiaryChart)
  leaveUnusedSubsidiaryChartRef.value.init(leaveUnusedSubsidiaryChart)
  RepChinaMapRef.value.init()
  RepAssetChartRef.value.init(assetSubsidiaryChart[activeAsset.value])
  RepMaterialChartRef.value.init(assesMaterialChart[activeAsset.value])
  RepRealTimeAllocationRef.value.init(assesRealTime[activeAsset.value])
})

const assetOverviewItem = computed(() => {
  return assetOverview[activeAsset.value]
})

// 下拉框变化
function handleActiveChange() {
  RepAssetChartRef.value.init(assetSubsidiaryChart[activeAsset.value])
  RepMaterialChartRef.value.init(assesMaterialChart[activeAsset.value])
  RepRealTimeAllocationRef.value.init(assesRealTime[activeAsset.value])
}

// 查看更多

function handleShowMore() {
  RepDialogMoreRef.value.open()
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Ali;
  src: url('../../font/ysbth.ttf');
}

.ali {
  font-family: Ali;
}

.data-board {
  .data-panel {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
  }

  .more {
    display: flex;
    font-size: 16px;
    color: #9b9b9b;
    vertical-align: baseline;
    align-items: center;
    cursor: pointer;
  }

  .subsidiary-chart {
    position: relative;
    height: 245px;

    img {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .map {
    height: 420px;
    margin-top: 25px;
  }

  .asset-overview {
    position: absolute;
    top: -10px;
    font-size: 16px;
    color: #333;

    &-item {
      margin-right: 25px;
      line-height: 1;

      .value {
        font-size: 25px;
        // font-weight: bold;
        color: #333;
      }

      .unit {
        color: #9b9b9b;
      }
    }
  }

  .asset-panel {
    width: 100%;
    height: 280px;
    padding: 20px 20px 16px;
    background: #fff;
  }

  .border-right {
    position: relative;
  }

  .border-right::after {
    position: absolute;
    top: 45px;
    right: 15px;
    bottom: 25px;
    width: 1px;
    background: #f6f6f9;
    content: '';
  }

  .border-left {
    position: relative;
  }

  .border-left::before {
    position: absolute;
    top: 45px;
    bottom: 25px;
    left: 5px;
    width: 1px;
    background: #f6f6f9;
    content: '';
  }
}
</style>
